<template>
  <view-box ref="viewBox" class="container" body-padding-bottom="0">
     <empty tips="您还没有相关订单" v-if="orderGoods !== null && orderGoods.length === 0"></empty>
    <div class="list">
      <div class="order-container" v-for="(goods, index) in orderGoods" :key="index">
        <div class="row-box" :class="[orderGoods.length - 1 !== index ? 'vux-1px-b' : '']">
          <div class="p-img">
            <img :src="goods.goods_thumb" alt="">
          </div>
          <div class="p-info">
            <div>
              <div class="p-name">
                {{goods.goods_name}}
              </div>
              <div class="p-spec">
                {{goods.spec_value}}
              </div>
            </div>
            <div class="order-btn">
              <x-button plain mini class="btn-red" v-if="action === 'comment'" @click.native="comment(goods)">晒单评价</x-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </view-box>
</template>
<script>
  import { ViewBox, XButton } from 'vux'
  import Empty from '@/views/components/Empty'
  export default {
    data () {
      return {
        orderGoods: null,
        action: ''
      }
    },
    components: {
      ViewBox,
      XButton,
      Empty
    },
    methods: {
      comment (orderGoods) {
        this.$router.push('/comments/' + orderGoods.order_id + '/' + orderGoods.id)
      },
      _getData () {
        this.$vux.loading.show()
        this.$http.get('/my_order_goods?action=' + this.action).then((response) => {
          this.orderGoods = response.data
          this.$vux.loading.hide()
        }).catch((error) => {
          console.log(error)
          this.$vux.loading.hide()
        })
      }
    },
    mounted () {
      this.action = this.$route.query.action
      this._getData()
    }
  }
</script>
<style scoped lang="less">
  .order-container {
    margin-top: 6px;
  }
  .row-box {
    padding: 10px;
    display: flex;
    justify-content:space-between;
  }
  .p-img {
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
    width: 100px;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
  }
  .p-img img {
    width: 100px;
    height: 100px;
  }
  .p-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .p-name {
      font-size: 14px;
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      color: #151516;
    }
    .p-spec {
      flex-grow: 1;
      font-size: 12px;
      color: #9c9c9c;
    }
    .order-btn {
      text-align: right;
      .weui-btn {
        margin-top: 0;
        border-radius: 2px;
        margin-left: 5px;
      }
      .weui-btn_mini {
        padding: 0 10px;
        line-height: 2;
      }
      .btn-red {
        border-color: @theme-color!important;
        color: @theme-color!important;
        &:active {
          border-color: rgba(206, 60, 57, 0.6)!important;
          color: rgba(206, 60, 57, 0.6)!important;
          background-color: transparent;
        }
      }
    }
  }
  .empty {
    color: #151516;
    text-align: center;
    font-size: 18px;
    margin-top: 120px;
    font-family: PingFangSC-Regular,Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Arial;
    i {
      font-size: 60px;
      color: #9c9c9c;
    }
  }
</style>